<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>手动签名</title>
    <link rel="stylesheet" href="{__GOUGU__}/layui/css/layui.css">
    <style>

        canvas {
            width: 100%; /* 设置Canvas宽度为页面宽度的90% */
            height: 200px; /* 设置Canvas高度为400像素 */
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            text-align: center;
        }

        #signatureCanvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md6 layui-col-md-offset3">
                <canvas id="signatureCanvas"></canvas>
                <button class="layui-btn layui-btn-primary" onclick="clearCanvas()">清除</button>
                <button class="layui-btn" onclick="saveSignature()">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="{__GOUGU__}/jquery/jquery.min.js"></script>
<script src="{__GOUGU__}/layui/layui.js"></script>
<script>
    layui.use('form', function () {
        var form = layui.form;
        // 初始化表单
        form.render();
    });

    var form = layui.form, tool = layui.tool, employeepicker = layui.employeepicker, laydate = layui.laydate,
        dropdown = layui.dropdown;

    $(document).ready(function () {
        var canvas = document.getElementById('signatureCanvas');
        var context = canvas.getContext('2d');
        var isDrawing = false;
        var lastX = 0;
        var lastY = 0;

        // 获取Canvas的缩放比例
        var rect = canvas.getBoundingClientRect();
        var scaleX = canvas.width / rect.width;
        var scaleY = canvas.height / rect.height;

        // 鼠标按下事件
        $(canvas).mousedown(function (e) {
            isDrawing = true;
            lastX = (e.clientX - rect.left) * scaleX;
            lastY = (e.clientY - rect.top) * scaleY;
        });

        // 鼠标移动事件
        $(canvas).mousemove(function (e) {
            if (!isDrawing) return;

            var mouseX = (e.clientX - rect.left) * scaleX;
            var mouseY = (e.clientY - rect.top) * scaleY;

            context.beginPath();
            context.moveTo(lastX, lastY);
            context.lineTo(mouseX, mouseY);
            context.stroke();
            lastX = mouseX;
            lastY = mouseY;
        });

        // 鼠标松开事件
        $(canvas).mouseup(function () {
            isDrawing = false;
        });
    });

    function clearCanvas() {
        var canvas = document.getElementById('signatureCanvas');
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
    }

    //保存
    function saveSignature() {
        var canvas = document.getElementById('signatureCanvas');
        var signatureData = canvas.toDataURL();

        //上传图片
        $.post("/api/common/base64_upload", {"file": signatureData}, function (res) {
            // console.log(res.data);
            if (res.code !== 1) {
                layer.msg(res.msg);
                return false;
            }

            // 审核
            var check_data = {
                "id": {$data.id},
                "content": {$data.content},
                "check_node": {$data.check_node},
                "check_admin_ids": {$data.check_admin_ids ?? 0},
                "check": {$data.check},
                "type": {$data.type},
                "file": res.data.url
            };
            // console.log(check_data);return  false;
            $.post("/oa/flow/flow_check", check_data, function (e) {
                if (e.code === 0) {
                    layer.msg(res.msg,{time:1000},function(){
                        parent.location.reload();
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });
                } else {
                    layer.msg(res.msg);
                }

            })
        })
    }


    //固定尺寸
    // $(document).ready(function () {
    //     var canvas = document.getElementById('signatureCanvas');
    //     var context = canvas.getContext('2d');
    //     var isDrawing = false;
    //     var lastX = 0;
    //     var lastY = 0;
    //
    //     // 鼠标按下事件
    //     $(canvas).mousedown(function (e) {
    //         isDrawing = true;
    //         lastX = e.offsetX;
    //         lastY = e.offsetY;
    //     });
    //
    //     // 鼠标移动事件
    //     $(canvas).mousemove(function (e) {
    //         if (!isDrawing) return;
    //
    //         context.beginPath();
    //         context.moveTo(lastX, lastY);
    //         context.lineTo(e.offsetX, e.offsetY);
    //         context.stroke();
    //         lastX = e.offsetX;
    //         lastY = e.offsetY;
    //     });
    //
    //     // 鼠标松开事件
    //     $(canvas).mouseup(function () {
    //         isDrawing = false;
    //     });
    // });
    //
    //
    //
    // function clearCanvas() {
    //     var canvas = document.getElementById('signatureCanvas');
    //     var context = canvas.getContext('2d');
    //     context.clearRect(0, 0, canvas.width, canvas.height);
    // }
</script>
</body>
</html>